<template>
	<view>
		<!-- 金豆记录 -->
    <view>
      <view class="bean-box">
        <view class="tn-flex">
          <image src="/static/images/my/bag.svg" style="height: 50px;width: 50px;" class=""></image>
          <text class="tn-margin-top">金豆 </text>
        </view>
        <view class="tn-text-bold dm-main-text-color tn-margin-left-xl" style="font-size: 26px">
          {{balanceTotal}}
        </view>
        <image src="/static/images/my/monkey.png" style="height: 90px;width: 150px;" class="monkey"></image>
      </view>
    </view>

		<view v-for="(item,index) in list" :key="index">
			<view class="tn-margin tn-padding-sm tn-flex tn-flex-row-between tn-bg-white" style="border-radius: 15px">
				<view class="tn-flex tn-flex-direction-column">
					<view class="tn-flex tn-text-bold tn-text-xl ">{{item.change_reason}}</view>
					<view class="tn-flex tn-text-sm dm-color-gray tn-margin-top-sm">
						{{$u.timeFormat(item.createtime, 'yyyy/mm/dd hh:MM')}}
					</view>
				</view>
        <view class="tn-flex tn-flex-col-center">
          <text class="tn-text-bold tn-text-xl dm-main-text-color">{{(item.type=='expend'?'-':'+')+item.change_num}}</text>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
  import common_mixin from '@/libs/mixin/common_mixin.js'
  import {hideLoading, showLoading} from "../../utils/utils";

	export default {
    mixins: [common_mixin],
		data() {
			return {
				page: 1,
				list: [],
				balanceTotal:0,   //金豆总计：余额+赠送
        hasMore:true,
			}
		},
		async onShow() {
      this.balanceTotal=this.getTotalBalance()
			this.list = [];
			showLoading('加载中...');
      this.list = await this.getList();
			hideLoading();
		},

		async onReachBottom() {
      let list = await this.getList()
      this.list = this.list.concat(list);
		},

		methods: {
      async getList() {
        if (!this.hasMore) {
          return [];
        }
        const resp = await this.$api.getJinDouDetailList({page:this.page})
        this.hasMore= resp.hasMore
        this.page = this.page + 1
        return resp.data
      },
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5EFEF;
	}
  .bean-box {
    position: relative;
    height: 130px;
    background: linear-gradient(186deg, #FFEAF0 17%, #FFFFFF 55%);
    box-shadow: 0px -4px 10px 0px rgba(159, 159, 159, 0.3);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    .monkey {
      position: absolute;
      right: 35px;
      bottom: 20px;
    }
  }

</style>
